<template>
    <div>
        <el-row>
            <el-form :inline="true">
                <el-col :span="8">
                    <el-form-item label="物资名称">
                        <el-input v-model="orderParam.itemName" placeholder="请输入" style="width:107%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物资编码">
                        <el-input v-model="orderParam.itemCode" placeholder="请输入" style="width:107%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物资类型">
                        <el-select v-model="orderParam.itemType" placeholder="请选择">
                            <el-option v-for="itemType in DictItemTypeDate" :key="itemType.id" :label="itemType.name"
                                :value="itemType.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <el-col :span="8">
                    <el-form-item label="生产厂家">
                        <el-select v-model="orderParam.manufacturer" placeholder="请选择">
                            <el-option v-for="manufacturer in DictManufacturerDate" :key="manufacturer.id"
                                :label="manufacturer.name" :value="manufacturer.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-row>
            <el-col class="align-right">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button @click="clear">重置</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryAllMaterial">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放表格数据 -->
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="itemCode" label="物资编码" width="150">
                    </el-table-column>
                    <el-table-column prop="itemName" label="物资名称" width="150">
                    </el-table-column>
                    <el-table-column prop="spAndModels" label="规格型号" width="150">
                    </el-table-column>
                    <el-table-column prop="itemTypeName" label="物资类型" width="150">
                    </el-table-column>
                    <el-table-column prop="store" label="库存数量" width="100">
                    </el-table-column>
                    <el-table-column prop="purchasePrice" label="采购价">
                    </el-table-column>
                    <el-table-column prop="retailPrice" label="零售价">
                    </el-table-column>
                    <el-table-column prop="manufacturerName" label="生产厂商" width="200">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <!-- 放分页部分 -->
                <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                    layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                    @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 5,
            total: 0,
            orderParam: {
                itemName: '',
                itemCode: '',
                itemType: '',
                manufacturer: ''
            },
            tableData: [

            ],
            DictManufacturerDate: [ //生产厂家

            ],
            DictItemTypeDate: [ //物资类型

            ]
        };
    },
    methods: {
        clear() {
            this.orderParam = {};
        },
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryAllMaterial();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryAllMaterial();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryAllMaterial();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryAllMaterial();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryAllMaterial();
        },
        queryAllMaterial() {
            //带分页参数pageNum,pageSize
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.orderParam;
            this.$axios.post("api/material/queryAllMaterial", pageParam).then(res => {
                if (res.data.code == 200) {
                    let pageData = res.data.data;
                    this.tableData = pageData.list;
                    //给分页参数赋值
                    this.total = pageData.total;
                    this.pageNum = pageData.pageNum;
                    this.pageSize = pageData.pageSize;
                } else {
                    this.$router.push({ path: "/login" });
                }
            });
        },
        //查询物资类型
        queryDictItemType() {
            this.$axios.get('api/dict/queryDict/' + 10)
                .then(res => {
                    if (res.data.code == 200) {
                        this.DictItemTypeDate = res.data.data
                    }
                })
        },
        //查询生产厂家
        queryManufacturer() {
            this.$axios.get('api/dict/queryDict/' + 13)
                .then(res => {
                    if (res.data.code == 200) {
                        this.DictManufacturerDate = res.data.data
                    }
                })
        }
    },
    created() {
        this.queryAllMaterial();
        this.queryDictItemType();
        this.queryManufacturer();
    }
};
</script>

<style scoped>
.align-right {
    display: flex;
    justify-content: flex-end;
}
</style>